import React from 'react';
import { ActivityIndicator, FlatList, Image, RefreshControl, Text, TouchableOpacity, View } from 'react-native';

interface D {
	_id: string;
	teacher_name: string;
	submission_time_str: string;
	leave_type: string;
	start_time_str: string;
	finish_time_str: string;
	auditor_status: string;
	teacher_leave_num: string;
}
export default function tpl(a: (action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | unknown[]) {
	const dt = d('dt') as D[];
	// console.log(dt, '-------dt----------');
	if (dt && dt.length > 0) {
		const page_no = Number(d('page_no'));
		const new_len = Number(d('new_len'));
		const len = dt.length;
		const page_size = 5;
		// console.log(page_no, '-------page_no----------', len, new_len);
		return (
			<View>
				<FlatList refreshControl={
					<RefreshControl
						onRefresh={a('a001')}
						colors={['#ff0000']}
						enabled={true}
						progressBackgroundColor="#ffffff"
						refreshing={false}
					/>
				} onEndReached={a('a002', page_no + 1)} onEndReachedThreshold={0.1} data={dt} keyExtractor={(item, index) => item._id + index} renderItem={({ item, index }) => {
					return (
						<TouchableOpacity onPress={a('a003', item.teacher_leave_num)}>
							<View style={{ backgroundColor: '#f4f4f4' }}>
								<View style={{ padding: 20, backgroundColor: '#fff', marginBottom: 20 }}>
									<View style={{ flexDirection: 'row', justifyContent: 'space-between', height: 40 }}>
										<Text style={{ color: '#333' }}>{item.teacher_name}提交的请假</Text>
										<Text>{item.submission_time_str}</Text>
									</View>
									<View style={{ flexDirection: 'row', height: 30 }}>
										<Text>请假类型：</Text>
										<Text>{item.leave_type}</Text>
									</View>
									<View style={{ flexDirection: 'row', height: 30 }}>
										<Text>开始时间：</Text>
										<Text>{item.start_time_str}</Text>
										{/* <Text>上午</Text> */}
									</View>
									<View style={{ flexDirection: 'row', height: 30 }}>
										<Text>结束时间：</Text>
										<Text>{item.finish_time_str}</Text>
										{/* <Text>下午</Text> */}
									</View>
									<View style={{ height: 30 }}>
										<Text style={{ color: '#333' }}>{item.auditor_status}</Text>
									</View>
								</View>
							</View>
							{(() => {
								if (len === index + 1 && len > page_size - 1) {
									if (new_len) {
										return (
											<View style={s('footer')}>
												<ActivityIndicator />
												<Text>正在加载更多数据...</Text>
											</View>
										);
									} else {
										return (
											<View style={{ height: 30, backgroundColor: '#f4f4f4', position: 'absolute', bottom: 0, left: 0, right: 0 }}>
												<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5, textAlign: 'center' }}>
													没有更多数据了
												</Text>
											</View>
										);
									}
								}
							})()}
						</TouchableOpacity>
					);
				}}
				/>
				{/* {new_len === 0 &&
					<View style={{ height: 30, backgroundColor: '#f4f4f4', position: 'absolute', bottom: 0, left: 0, right: 0 }}>
						<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5, textAlign: 'center' }}>没有更多数据了</Text>
					</View>
				} */}
			</View>
		);
	} else if (dt && dt.length === 0) {
		return (<View style={s('page')}>
			<Image source={require('../../imgs/wushuju.png')} style={{ width: 80, height: 80 }} />
			<Text style={{ fontSize: 20 }}>没有符合当前筛选条件的数据</Text>
		</View>);
	} else {
		return (
			<View style={s('footer1')}>
				<ActivityIndicator color='blue' size="large" />
			</View>
		);
	}
}
